<template>
  <div class="printForm">
    <div class="area-header">
      <span class="area-header-title">{{ $t('申请单') }}</span>
    </div>
    <table class="printTable">
      <tr>
        <td class="tit">{{ $t('申请标题') }}</td>
        <td colspan="3">{{ form.actTitle }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('申请人') }}</td>
        <td>
          {{ form.userName }}
        </td>
        <td class="tit">{{ $t('申请时间') }}</td>
        <td>{{ parseTime(form.applyTime) }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('付款金额(元)') }}</td>
        <td>
          {{ moneyFormat(form.total) }}
        </td>
        <td class="tit">{{ $t('币种') }}</td>
        <td>
          {{ currencyFormat(form.currency) }}
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('主体类型') }}</td>
        <td>
          {{ form.typeName }}
        </td>
        <td class="tit">{{ $t('主体名称') }}</td>
        <td>
          {{ form.investorName }}
        </td>
      </tr>
      <tr v-show="false">
        <td class="tit">{{ $t('付款方式') }}</td>
        <td>
          {{ methodFormat(form.method) }}
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('紧急级别') }}</td>
        <td>
          {{ levelFormat(form.level) }}
        </td>
        <td class="tit">{{ $t('关联合同') }}</td>
        <td>
          <span> {{ form.contractAssociatedName }}</span>
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('备注') }}</td>
        <td colspan="3">
          <pre v-html="form.remark" />
        </td>
      </tr>
    </table>

    <div class="area-header">
      <span class="area-header-title">{{ $t('收款方信息') }}</span>
    </div>
    <table class="printTable">
      <tr>
        <td class="tit">{{ $t('收款方名称') }}</td>
        <td>
          {{ form.payeeName }}
        </td>
        <td class="tit">{{ $t('开户行名称') }}</td>
        <td>
          {{ form.depositBank }}
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('账户名称') }}</td>
        <td>
          {{ form.accountTitle }}
        </td>
        <td class="tit">{{ $t('银行账号') }}</td>
        <td>
          {{ form.bankNumber }}
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('收款方地址') }}</td>
        <td colspan="3">
          <pre v-html="form.addressReceiver" />
        </td>
      </tr>
    </table>
    <div v-if="form.types && form.types.length > 0" style="margin-bottom: 15px;">
      <div class="area-header">
        <span class="area-header-title">{{ $t('付款明细') }}</span>
      </div>
      <table class="previewTable">
        <thead>
          <th>{{ $t('费用类型') }}</th>
          <th>{{ $t('关联业务数据') }}</th>
          <th>{{ $t('部门') }}</th>
          <th>{{ $t('付款金额(元)') }}</th>
          <th>{{ $t('本次付款占比(%)') }}</th>
          <!-- <th>{{ $t('备注') }}</th> -->
          <!-- <th v-if="form.payCompletionTime !== null && form.payCompletionTime !== '' && form.payCompletionTime !== undefined">{{ $t('实际付款时间') }}</th> -->
          <th v-if="form.payCompletionTime !== null && form.payCompletionTime !== '' && form.payCompletionTime !== undefined">{{ $t('实际付款金额(元)') }}</th>
        </thead>
        <tbody>
          <tr v-for="(v, ind) in form.types" :key="ind">
            <td>{{ v.typeOneName }}/{{ v.typeTwoName }}</td>
            <td>{{ v.businessName }}</td>
            <td>{{ v.departmentName }}</td>
            <td>{{ moneyFormat(v.amount) }}</td>
            <td>{{ v.ratio }}</td>
            <!-- <td>{{ v.remark }}</td> -->
            <!-- <td v-if="form.payCompletionTime !== null && form.payCompletionTime !== '' && form.payCompletionTime !== undefined">{{ parseTime(v.actualPaymentTime) }}</td> -->
            <td v-if="form.payCompletionTime !== null && form.payCompletionTime !== '' && form.payCompletionTime !== undefined">{{ moneyFormat(v.actualPaymentMoney) }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!--收付款计划-->
    <div v-show="oaContractPayColName === '付款'" style="margin-bottom: 15px;">
      <div class="area-header">
        <span class="area-header-title">{{ $t('付款计划') }}</span>
      </div>
      <table class="previewTable">
        <thead>
          <th>{{ $t('主体名称') }}</th>
          <th>{{ $t('预计付款时间') }}</th>
          <th>{{ $t('预计付款金额')+ $t('金额单位') }}</th>
          <th>{{ $t('币种') }}</th>
          <th>{{ $t('备注') }}</th>
        </thead>
        <tbody>
          <tr v-for="(v, ind) in oaContractPlanList" :key="ind">
            <td>{{ v.investName }}</td>
            <td>{{ parseTime(v.paymentTime) }}</td>
            <td>{{ moneyFormat(v.paymentMoney, 'w') }}</td>
            <td>{{ currencyFormat(v.currency) }}</td>
            <td>{{ v.remark }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div v-show="oaContractPayColName === '收款'" style="margin-bottom: 15px;">
      <div v-show="oaContractPayColName === '收款'" class="area-header">
        <span class="area-header-title">{{ $t('收款计划') }}</span>
      </div>
      <table class="previewTable">
        <thead>
          <th>{{ $t('主体名称') }}</th>
          <th>{{ $t('预计收款时间') }}</th>
          <th>{{ $t('预计收款金额')+ $t('金额单位') }}</th>
          <th>{{ $t('币种') }}</th>
          <th>{{ $t('备注') }}</th>
        </thead>
        <tbody>
          <tr v-for="(v, ind) in oaContractPlanList" :key="ind">
            <td>{{ v.investName }}</td>
            <td>{{ parseTime(v.collectionTime) }}</td>
            <td>{{ moneyFormat(v.collectionMoney, 'w') }}</td>
            <td>{{ currencyFormat(v.currency) }}</td>
            <td>{{ v.remark }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 附件列表 -->
    <FileView :list.sync="form.fileList" data-type="oa_expense" :btn-show="!otherBtnHide" />

  </div>
</template>

<script>
  import { getOaPayment, getPayeeHistory } from '@/api/oa/payment/oaPayment'
  import { getFdSubjectList } from '@/api/fd/config/getTypeMain'
  import { listDataContract, getOaContractPlanByMainId } from '@/api/oa/contract/oaContract'
  import { findInvestMain } from '@/api/deal/contract/dealContract'
	export default {
    components: {
    },
		data() {
			return {
        // 是否隐藏保存按钮
        btnHide: false,
        // 是否隐藏其它按钮
        otherBtnHide: false,
        subDisabled: true,
        loading: false,
        previewId: '',
        parameters: '',
        // 主体类型
        subjectType: '',
        selectID: '',
				// 表单参数
				form: {
					// 付款主体
					types: [],
					// 附件列表
          fileList: [],
          expenseEntityType1: [],
          expenseEntityType: []
        },

        typtId: '',
        // 付款币种
        currencyOptions: [],
        // 付款方式
        methodOptions: [],
        // 紧急级别
        levelOptions: [],
        // 付款大类
        getFdSubjectList: [],
        // 合同下拉
        selectDropDownContract: [],
        // 合同下拉
        selectDropDownContractTemp: [],
        restaurants: [],
        // 付款类型选择的类型 是否展示 项目等input框
        isShowCascader: '',
        // 合同提示语
        contractMessage: this.$t('请选择付款类型后获取合同'),
        oaContractPlanList: [],
        oaContractPaymentLoading: false,
        oaContractPayColName: this.$t('收付款'),
        // 合同查看详情
        contractPageLoading: false
			}
		},
    computed: {

    },
		watch: {
    },
    mounted() {
      this.restaurants = this.loadAll()
    },
    created() {
      // 付款币种
      this.getDicts('currency').then(response => {
        this.currencyOptions = response.data
      })
      // 付款方式
      this.getDicts('oa_payment_method').then(response => {
        this.methodOptions = response.data
      })
      // 紧急级别
      this.getDicts('oa_level_emergency').then(response => {
        this.levelOptions = response.data
      })

      // 付款大类
      getFdSubjectList('oa_payment').then(response => {
        this.getFdSubjectList = this.changeSubjectList(response.data)
      })

      listDataContract().then(response => {
        this.selectDropDownContract = response.data
        this.selectDropDownContractTemp = response.data
      })

      this.$bus.$emit('async_done')
    },
		methods: {
      changeSubjectList(val) {
        const arr = []
        if (val.length !== 0) {
          val.forEach(item => {
            const obj = {}
            obj.value = item.value
            obj.label = this.$t(item.label)
            if (item.children && item.children.length > 0) {
              obj.children = this.changeSubjectList(item.children)
            }
            arr.push(obj)
          })
        }
        return arr
      },

      // 币种字典翻译
      currencyFormat(value) {
        return this.selectDictLabel(this.currencyOptions, value)
      },
      methodFormat(value) {
        return this.selectDictLabel(this.methodOptions, value)
      },
      levelFormat(value) {
        return this.selectDictLabel(this.levelOptions, value)
      },
      // 计算报销总额
      getSummaries() {
        let sum = 0
        this.form.types.forEach(item => {
          sum += +item.amount
        })
        this.$set(this.form, 'total', sum)
        return sum
      },
      // 初始化数据
      init(data) {
        this.loading = true
        this.oaContractPayColName = ''
        this.contractMessage = this.$t('请选择付款类型后获取合同')
        if (data !== null && data !== '') {
          getOaPayment(data.id).then(response => {
            this.form = response.data
            // 费用类型
            for (let i = 0; i < this.form.types.length; i++) {
              const type = this.form.types[i]
              this.form.types[i].typeArray = [type.typeOne, type.typeTwo]
              this.payTypeChange(i)
            }
            // subjectType
            // if(this.form.typeSub === 'deal') {
            // }
            // 获取合同
            // this.schange(this.form.businessId)
            this.loading = false
          })
        } else {
          this.reset()
          this.form.currency = 'CNY'
          this.loading = false
        }
      },

      // -------------------------------------- 收款方空间控件方法 start(无需修改) --------------------------------------
      querySearch(queryString, cb) {
        var restaurants = this.restaurants
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().includes(queryString.toLowerCase()))
        }
      },
      // -------------------------------------- 收款方控件内置方法 end --------------------------------------
      // 收款方历史提示
      loadAll() {
        var temp = []
        getPayeeHistory().then(reponse => {
          for (var i = 0; i < reponse.data.length; i++) {
            var obj = {
              'value': reponse.data[i].payeeName,
              'address': reponse.data[i].depositBank + '|' + reponse.data[i].accountTitle + '|' + reponse.data[i].bankNumber
            }
            temp.push(obj)
          }
        })
        return temp
      },
      // 收款方选择后触发
      handleSelect(item) {
        console.log(item)
        this.form.payeeName = item.value
        var arr = item.address.split('|')
        this.form.depositBank = arr[0]
        this.form.accountTitle = arr[1]
        this.form.bankNumber = arr[2]
      },
      // 收款方旁边的小按钮
      handleIconClick(ev) {
        this.msgInfo(this.$t('暂时不可用'))
        console.log(ev)
      },
      // 付款类型的onchang时间
      payTypeChange(value) {
        this.subjectType = ''
        this.getFdSubjectList.forEach(item => {
          if (value === undefined) {
            var temp = []
            temp.push('-1')
            value = temp
          }
          if (item.id === value[0]) {
            this.subjectType = item.subjectType
            this.form.businessType = item.subjectType
            if (item.subjectType === 'deal') {
              this.selectDropDownContract = []
              this.contractMessage = this.$t('请先选择项目,加载该项目下的合同')
            } else {
              this.contractMessage = this.$t('请选择合同')
              this.selectDropDownContract = this.selectDropDownContractTemp
            }
          }
        })
      },
      schange(value) {
        this.form.contractAssociated = undefined
        this.form.businessId = value
        // 选择项目后,将该项目下的投资主体自动带出
        if (this.form.id === '' || this.form.id === undefined) {
          if (value !== undefined && value !== '' && value !== null) {
            this.form.types = []
            findInvestMain(value).then(response => {
              response.data.forEach(item => {
                var obj = {
                  type: item.investType == null ? '' : item.investType,
                  investorId: item.investMain == null ? '' : item.investMain
                }
                this.form.types.push(obj)
              })
            })
          }
        }
        // 获取该项目下的合同
        var type = this.form.typeArray[0]
        this.getFdSubjectList.forEach(item => {
          if (item.id === type) {
            type = item.subjectType
          }
        })
      },
      // 计算付款主体的百分比
      percentageCalculation() {
        var temp = 0
        this.form.types.forEach(item => {
          temp += item.amount
        })
        this.form.types.forEach(item => {
          var ratioTemp = (item.amount / temp) * 100
          if (isNaN(ratioTemp)) {
            ratioTemp = 0
          }
          if (parseInt(ratioTemp) === parseFloat(ratioTemp)) {
            item.ratio = ratioTemp.toFixed(4)
          } else {
            item.ratio = ratioTemp.toFixed(4)
          }
        })
      },
      // 加载合同下的收付款计划
      contractChange(id) {
        this.oaContractPaymentLoading = true
        this.oaContractPlanList = []
        getOaContractPlanByMainId(id).then(response => {
          console.log(response.data)
          if (response.data !== null && response.data.length > 0) {
            var temp = response.data[0].collectionTime
            if (temp === '' || temp === null || temp === undefined) {
              this.oaContractPayColName = '付款'
            } else {
              this.oaContractPayColName = '收款'
            }
          }
          this.oaContractPlanList = response.data
          this.oaContractPaymentLoading = false
        })
      },
      viewContractPage(id) {
        var proArr = this.selectDropDownContract
        if (proArr !== null && proArr !== undefined && proArr !== '') {
          proArr.forEach(item => {
            if (id === item.id) {
              if (item.actId === undefined) {
                id = item.rows.actId
              } else {
                id = item.actId
              }
            }
          })
        }
        if (id !== null && id !== '' && id !== undefined) {
          console.log(id)
          this.contractPageLoading = true
          this.$nextTick(() => {
            var proData = {}
            proData.actId = id
            this.$refs.processInfoForm.init(proData)
          })
        } else {
          this.msgError(this.$t('请先选择一个合同!'))
        }
      }

    }
	}
</script>

